<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			
			<!--退款信息-->
			<view class="detail-item">
				<uni-section title="退款信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						退款单号：
						<text>{{info.number}}</text>
						<text class="detail-text-copy" @click="copyText(info.number)">复制</text>
					</view>
					<view class="detail-text">
						退款状态：
						<uni-tag size="small" :text="arrText(orderRefundStatusList, info.status)" />
					</view>
					<view class="main-flex detail-text detail-flex-start" v-if="info.refundImg">
						退款凭证：
						<view class="detail-text_r" @click.stop="previewImg(info.refundImg)">
							<up-image width="120rpx" height="120rpx" :src="info.refundImg" :lazy-load="true"></up-image>
						</view>
					</view>
					<view class="detail-text">
						仓库流水：
						<text>{{info.orderNumber}}</text>
						<text class="detail-text-copy" @click="copyText(info.orderNumber)">复制</text>
						<text v-if="checkPermi(['zhouyz:warehouseRecord:list'])" class="detail-text-copy" @click="showOrder(`/pages/warehouse/record?number=${info.number}`)">查看</text>
					</view>
					<view class="detail-text">
						退款说明：
						<text>{{info.remark}}</text>
					</view>
				</view>
			</view>
			
			<!--订单信息-->
			<view class="detail-item">
				<uni-section title="订单信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						订单编号：
						<text>{{orderInfo.orderNumber}}</text>
						<text class="detail-text-copy" @click="copyText(orderInfo.orderNumber)">复制</text>
					</view>
					<view class="detail-text">
						订单状态：
						<uni-tag size="small":class="`order-status-${orderInfo.status}`" :text="arrText(allStatusList, orderInfo.status)" />
					</view>
					<view class="detail-text">
						发货时间：
						<text>{{orderInfo.sendTime}}</text>
					</view>
					<view class="detail-text">
						用户姓名：
						<text>{{orderInfo.customerName}}</text>
						<text class="detail-text-copy" @click="copyText(orderInfo.customerName)">复制</text>
					</view>
					<view class="detail-text">
						注册电话：
						<text>{{orderInfo.accountPhone}}</text>
						<text class="detail-text-copy" @click="copyText(orderInfo.accountPhone)">复制</text>
						<text class="detail-text-copy" @click="call(orderInfo.accountPhone)">拨打</text>
					</view>
					<view class="detail-text">客户店铺：<text>{{orderInfo.company}}</text></view>
					<view class="detail-text">销售人员：<text>{{orderInfo.salesmanName}}</text></view>
					<view class="detail-text">下单时间：<text>{{orderInfo.createTime}}</text></view>
					<view class="detail-text">付款时间：<text>{{orderInfo.payTime}}</text></view>
					<view class="detail-text">订单备注：<text>{{orderInfo.remark}}</text></view>
					<view class="detail-text">配送仓库：<text>{{orderInfo.warehouseName}}</text></view>
					<view class="detail-text">应付金额：<text>{{orderInfo.originalPrice}}</text></view>
					<view class="detail-text">实付金额：<text>{{orderInfo.actualPrice}}</text></view>
					<view class="detail-text">折扣金额：<text>{{orderInfo.discountPrice}}</text></view>
					<view class="detail-text">已退款金额：<text style="color: red;">{{orderInfo.refundPrice}}</text></view>
					<view class="detail-text">本次退款金额：<text style="color: green;">{{refundTotal}}</text></view>
					<view class="detail-text">
						退款方式：
						<uni-tag size="small" :text="info.refundType === 1 ? '线下' : '线上'" />
					</view>
				</view>
			</view>
			<!--商品清单-->
			<view class="detail-item" v-if="checkPermi(['zhouyz:orderRefundDetail:list'])">
				<uni-section title="商品清单" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						stripe
						border>
						
						<template v-slot:left="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row">
									商品：
									<text class="table-td-text">{{row.productName}}</text>
								</view>
								<view class="table-td-row">
									批次：
									<text class="table-td-text">{{row?.batchs || ''}}</text>
								</view>
								<view class="table-td-row">
									单价：
									<text class="table-td-text">{{row.productPrice}}</text>
								</view>
								<view class="table-td-row">
									单位：
									<text class="table-td-text">{{row.productUnit}}</text>
								</view>
								<view class="table-td-row">
									数量：
									<text class="table-td-text">{{row.productNumber}}</text>
								</view>
								<view class="table-td-row">
									收货状态：
									<uni-tag size="small" :text="arrText(receiveStatusList, row.receiveStatus)" />
								</view>
								<view class="table-td-row">
									退款方式：
									<uni-tag size="small" :text="arrText(refundTypeList, row.refundType)" />
								</view>
							</view>
						</template>
						<template v-slot:right="{ row }">
							<view class="table-td-cell">
								<view class="table-td-row">
									退货整件：
									<text class="table-td-text">{{row.refundNumber}}</text>
								</view>
								<view class="table-td-row">
									退货单价：
									<text class="table-td-text">{{row.refundPrice}}</text>
								</view>
								<view class="table-td-row">
									退款金额：
									<text class="table-td-text">{{row.refundTotal}}</text>
								</view>
								<view class="table-td-row">
									退款原因：
									<uni-tag size="small" :text="arrText(orderRefundReasonList, row.reasonType)" />
								</view>
								<view class="table-td-row">
									退零数量：
									<text class="table-td-text">{{row.refundPartNumber}}</text>
								</view>
								<view class="table-td-row">
									浪费整件：
									<text class="table-td-text">{{row.wasteNumber}}</text>
								</view>
								<view class="table-td-row">
									浪费零散：
									<text class="table-td-text">{{row.wastePartNumber}}</text>
								</view>
								<view class="table-td-row">
									备注：
									<text class="table-td-text">{{row.remark}}</text>
								</view>
							</view>
						</template>
					</ty-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { allProvince } from "@/api/erp_api/region"
import { orderStatus, orderRefundReason } from "@/api/system/dict/data"
import { orderRefundProduct, orderDetail, orderRefundDetail } from "@/api/erp_api/order"
import { copyText, arrText, previewImg } from '@/utils/ty.js';
import { orderRefundStatusList, receiveStatusList, refundTypeList } from '@/utils/config.js';
import useUserStore from '@/store/modules/user'
import { Decimal } from 'decimal.js'

	const userStore = useUserStore()	
	onLoad(async (option) => {
		if (option.id) {
			await getOrderRefundReason()
			await getOrderStatus()
			id.value = option.id
			getDetail()
			if (checkPermi(['zhouyz:orderRefundDetail:list'])) {
				getProductDetail()
			}
		}
	})
	
	// 获取订单退款原因
	const orderRefundReasonList = ref([])
	const getOrderRefundReason = () => {
		return orderRefundReason().then(res => {
			orderRefundReasonList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 获取订单状态
	const allStatusList = ref([])
	const getOrderStatus = () => {
		return orderStatus().then(res => {
			allStatusList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const tableList = ref([])
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		orderRefundDetail(params).then(res => {
			info.value = res.data || {}
			getOrderDetail(res.data.orderId)
			isLoading.value = false
			uni.hideLoading()
	  }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	const orderInfo = ref({})
	const getOrderDetail = (orderId) => {
		const params = {
			id: orderId
		}
		orderDetail(params).then(res => {
			orderInfo.value = res.data || {}
	  })
	}
	
	// 表格头部
	const columns = ref([
		{ title: '商品信息', key: 'left' },
		{ title: '退款信息', key: 'right' }
	])
	
	const getProductDetail = () => {
		const params = {
			orderRefundId: id.value
		}
		orderRefundProduct(params).then(res => {
			tableList.value = res.rows || []
    })
	}
	
	// 查看
	const showOrder = (url) => {
		uni.navigateTo({
			url
		})
	}
	
	// 拨打电话
	const call = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		})
	}
	
	const refundTotal = computed(() => {
		return tableList.value.reduce((acc, curr) => {
			return Decimal(acc).add(curr.refundTotal).toNumber()
		}, 0)
	})
	
</script>

<style scoped>
</style>
